<template>
  <div class="view-container">
    <div class="wrapper"></div>
    <div class="wrapper-white">
      <div class="top-Title">公司简介</div>
      <span class="top-sub"
        >武汉纺友技术有限公司是直管国有重要骨干企业国机集团
        （全称中国机械工业集团有限公司）旗下的数字化服务提供商。2014年9月成立于武汉·中国光谷。2015年取得国家高新技术企业认证、双软企业认证，连续四
        年获得光谷瞪羚企业及3551人才计划，获得国家增值电信业务经营许可证。</span
      >
      <div class="top-iamge">
        <div class="top-midd-url">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/88c2c6f94f793bdfae554830ddc0c254.png"
          />
        </div>
        <span class="top-midd-txt">“数智纺”T-MES<br />智能纺织专家</span>
      </div>
      <div class="top-backview">
        <span class="top-backview-Title">“数智纺”品牌——<br />专注纺织产业数字化建设，助力企业智能升级</span>
        <div class="top-backview-sub">
          基于多年互联网信息技术、VR/工业仿真技术和物联网技术在工业
          领域的应用实践，武汉纺友打造“数智纺”品牌，专注为纺织企业
          提供数字化信息、专备件采购、供应链金融等一站式服务。形成
          价值领先的工业物联网+产业互联网平台，致力于帮助企业数字
          化升级，形成云化核心能力，助力传统工业企业资产的数据化、 网络化、智能化转型。
        </div>
        <div class="top-list-back">
          <div class="top-list">
            <div class="top-list-left">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/379cec6ac4033c5f89a66c65fdf9ca2c.png"
              />
            </div>
            <span class="top-list-right">互联网<br />信息技术 </span>
          </div>
          <div class="top-list">
            <div class="top-list-left">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/5c731e79531c3fd2a32e91944e18832c.png"
              />
            </div>
            <span class="top-list-right">VR/工业<br />仿真技术 </span>
          </div>
          <div class="top-list">
            <div class="top-list-left">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/1dc39589a65c3a118461bb1c2c541c5c.png"
              />
            </div>
            <span class="top-list-right">物联网 <br />技术 </span>
          </div>
        </div>
      </div>
      <div class="top-Title top-Title-Two">主要业务</div>
      <span class="top-sub top-Title-Two"
        >“数智纺”多年来专注于纺织行业数字化及智能工厂建设， 并深度整合上下游资源，为纺织企业打造全方位一站式
        服务平台。目前主要经营业务是：</span
      >
      <div v-for="(item, index) in businessArr" :key="index">
        <div class="business-white wow fadeInRight" 
        data-wow-duration="0.4s" :data-wow-delay="index/3+'s'"
        :style="{ background: 'url(' + item.url + ')', backgroundSize: '100%' }">
          <span class="business-title">{{ item.txt }}</span>
          <span class="business-sub">{{ item.sub }}</span>
        </div>
      </div>
    </div>
    <div class="honour-wrapper">
      <div class="honour-back">
        <span class="honour-title">资质荣誉</span>
        <span class="honour-sub"
          >纺友致力于知识产权的创新与保护，已授权MES、工业<br />互联网、 供应链金融管理、企业数字化升级、数字<br />未来工厂、数智纺等多项软件著作权</span
        >
      </div>
      <div class="panel-swiper honorSwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in imgUrls" :key="index">
            <div>
              <img :src="item" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- <swiper
        class="swiperClass"
        style="height: 345rpx; width: 100%"
        circular
        previous-margin="130rpx"
        next-margin="130rpx"
        bindchange="bindchange"
      >
        <div  v-for="(item, index) in imgUrls" :key="index">
          <swiper-item>
            <image :src="item" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" />
          </swiper-item>
        </div>
      </swiper> -->
      <!-- <div class="swiper-container img-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in imgUrls" :key="index">
            <image :src="item" class="slide-image" />
          </div>
        </div>
      </div> -->
      <div class="swiper-container down-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in honourArr" :key="index">
            <div class="honour-swiper-item">
              <div v-for="(child, indexs) in honourArr[index]" :key="indexs">
                <div class="honour-Top-white" :style="{ paddingTop: (child.type == 0 ? 35 : 0) + 'px' }">
                  <div
                    class="honour-Top-white-url"
                    :style="{
                      width: (child.type == 0 ? 105.5 : 73) + 'px',
                      height: (child.type == 0 ? 72 : 106) + 'px'
                    }"
                  >
                    <van-image width="100%" height="100%" fit="cover" :src="child.url" />
                  </div>
                  <div class="honour-Top-white-img">
                    <van-image
                      width="100%"
                      height="100%"
                      fit="cover"
                      src="https://oss.cloudcpc.com/28de276774b431d19f754ba48cbd24a0.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="culture-wrapper">
      <div class="top-Title culture-top">企业文化</div>
      <div class="tab-list">
        <div v-for="(item, index) in tabArr" :key="index">
          <div class="tab-list-txt" @click="chooseClass(item.id)" :class="tabIndex == item.id ? '' : 'tab-list-txt-N'">
            {{ item.txt }}
          </div>
        </div>
      </div>
      <div class="culture-img">
        <van-image width="100%" height="100%" fit="cover" :src="tabArr[tabIndex].img" />
      </div>
      <div class="culture-sub-back">
        <span class="culture-txt">{{ tabArr[tabIndex].txt }}</span>
        <span class="culture-sub">{{ tabArr[tabIndex].sub }}</span>
      </div>
      <div class="culture-down">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/06649d2d80653365b0c5cd019d300908.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import Swiper from 'swiper'
import { WOW } from 'wowjs'

export default {
  data() {
    return {
      businessArr: [
        {
          url: 'https://oss.cloudcpc.com/9c9e390fd30733a5985fda30b64ef9c1.png',
          txt: '纺织企业专业门户资讯平台的开发与运营',
          sub: 'PC站/iOSAPP/安卓APP'
        },
        {
          url: 'https://oss.cloudcpc.com/574d39fe954837ecab18968c1ce73e66.png',
          txt: '新型融媒体的开发与运营',
          sub: '纺织工业互联网电商平台/纺织供应链金融平台'
        },
        {
          url: 'https://oss.cloudcpc.com/1cdd35bfc3423d2784d4af2d13ea0489.png',
          txt: '3D/VR工业仿真技术的开发与运营',
          sub: '公众号/小程序/APP/“报网端微屏”'
        },
        {
          url: 'https://oss.cloudcpc.com/ec9023f8d93e3aa5a77aacf2a546fc74.png',
          txt: '工业互联网电子商务平台的开发与运营',
          sub: 'VR云展馆/网上展馆/3D、VR全流程交互式工业产品体验平台'
        },
        {
          url: 'https://oss.cloudcpc.com/c5b1a765170d35d1a49ee9febc84ac0d.png',
          txt: '数字化信息系统服务',
          sub: 'MES/MOM/ERP/WMS/纺智云'
        }
      ],
      tabArr: [
        {
          id: 0,
          txt: '团队',
          img: 'https://oss.cloudcpc.com/54a365029eb03227a5603faacd1d30eb.png',
          sub: '不断探索，才能知道这个时代正在发生什么，进而去跟上，去引领。丰富的党建文化活动筑牢思想根基。业务上敢于创新，团结合作，在不断的挑战中得到成长。'
        },
        {
          id: 1,
          txt: '环境',
          img: 'https://oss.cloudcpc.com/d36e2fa198da373085508d81503a890f.png',
          sub: '轻松、和谐、包容，创造能被广大员工共同感 知并认同的工作环境，和积极向上的良好氛围。'
        },
        {
          id: 2,
          txt: '愿景',
          img: 'https://oss.cloudcpc.com/db0ba5ca441d36639d26a4fd12a49cef.png',
          sub: '态度决定一切，细节决定成败，纺友与您一起开创未来。'
        }
      ],
      honourArr: [
        [
          {
            type: 0,
            url: 'https://oss.cloudcpc.com/e01016eeb7e03faeb0a474a468e036a9.png'
          },
          {
            type: 0,
            url: 'https://oss.cloudcpc.com/f7b7ea988eea3e4d9c8b5fd2db0b8add.png'
          }
        ],
        [
          {
            type: 1,
            url: 'https://oss.cloudcpc.com/b3cf2fd38e863018b78a0847488c5ad4.png'
          },
          {
            type: 1,
            url: 'https://oss.cloudcpc.com/5757640003e33906abda380f0da5a876.png'
          }
        ]
      ],
      imgUrls: [
        'https://oss.cloudcpc.com/5a0d62c8a954348e92a9c84083e5f32a.png',
        'https://oss.cloudcpc.com/e687423da60f338b8214e44dfefc6efa.png',
        'https://oss.cloudcpc.com/968e5d10561331a98a6c8ccd82865039.png'
      ],
      swiperIndex: 0,
      tabIndex: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      let wow = new WOW({
        boxClass: 'wow', /// 动画元件css类（默认为wow）
        animateClass: 'animated', // 动画css类（默认为animated）
        offset: 0, // 到元素距离触发动画（当默认为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true // 对异步加载的内容进行操作（默认为true）
      })
      // wow.start()
      wow.init()
    })
    this.$nextTick(() => {
      var swiper = new Swiper('.down-swiper', {
        pagination: {
          el: '.swiper-pagination'
        }
      })

      this.$nextTick(() => {
      /* eslint-disable no-new */
      new Swiper('.honorSwiper', {
        watchSlidesProgress: true,
        slidesPerView: 2.3,
        centeredSlides: true,
        loop: true,
        // zoom: true,
        loopedSlides: 3,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        on: {
          progress: function (progress) {
            // console.log(progress)
            for (let i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i)
              // console.log(slide)
              var slideProgress = this.slides[i].progress
              var modify = 1
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1
              }
              // 长度 221是每个swiper-slide宽度的一半  230
              var zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
              var translate = slideProgress * modify * 280 + 'px'
              var scale = 1 - Math.abs(slideProgress) / 10 // 5
              slide.transform(
                'translateX(' + translate + ') scale(' + scale + ')'
              )

              slide.css('zIndex', zIndex)
              slide.css('opacity', 1)
              if (Math.abs(slideProgress) > 3) {
                slide.css('opacity', 0)
              }
            }
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i)
              slide.transition(transition)
            }
          }
        }
      })
    })

      var swiper = new Swiper('.img-swiper', {
        direction: 'horizontal',
        loop: false,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 20,
        observer: true,
        observeParents: true
      })
    })

    // WxShare({
    //   title: '云上展',
    //   desc: '数字展馆一站式服务，文化、品牌、科技、展示、互动、营销多位一体，量身定制虚拟数字解决方案！',
    //   link: `${redirectUrl}${fullPath}`,
    //   imgUrl: 'https://m.2025.net/static/img/1.de3500b4.gif'
    // })
  },

  methods: {
    chooseClass(e) {
      this.tabIndex = e
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index';
</style>
